<template>
  <div>
    <div class="top">
      <i class="el-icon-menu"></i>
      <span class="sh">门店上货</span>
    </div>
    <hr style="color: grey" />
    <div class="content">
      <div class="content_top">
        <el-input v-model="input" placeholder="请扫描商品条码" :disabled="!checked" ref="input1" style="width: 300px"
          @keyup.enter.native="search(1)"></el-input>
        <el-input v-model="input1" placeholder="请输入商品条码或扫码" class="hide" ref="input" style="width: 300px"
          @keyup.enter.native="search(2)"></el-input>
        <el-checkbox v-model="checked" @change="danxuan()">手动输入条码</el-checkbox>
      </div>
      <div class="content_bottom">
        <div class="content_bottom_table" style="overflow-y:scroll;overflow-x:hidden;height:100%;overflow:auto">
          <el-table :data="tableData" border style="width: 950px;">
            <el-table-column prop="goods_id" label="流水号" width="100" align="center">
            </el-table-column>
            <el-table-column prop="goods_bar_code" label="条码" align="center">
            </el-table-column>
            <el-table-column prop="goods_name" label="商品名称" align="center">
            </el-table-column>
            <el-table-column prop="goods_price" label="单位" align="center">
            </el-table-column>
            <el-table-column prop="goods_amount" label="上货数量" align="center">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.goods_amount" controls-position="right" :min="1"></el-input-number>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="content_bottom_button">
          <el-button style="width: 100%;margin-right:100px" @click="dialogVisible">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Loading",
  data () {
    return {
      checked: false,
      code: 0,
      numb: 0,
      input: "",
      input1: "",
      tableData: [],
    };
  },
  methods: {
    danxuan () {
      if (this.checked) {
        clearInterval(this.timer);
        this.input = " ";
        this.jujiao1()
      } else {
        this.jujiao();
      }
    },
    jujiao () {
      this.$nextTick(() => {
        this.$refs.input.focus();
      });
    },
    jujiao1 () {
      this.$nextTick(() => {
        this.$refs.input1.focus();
      });
    },
    dingshiqi () {
      this.timer = setInterval(() => {
        this.jujiao();
      }, 5000);
    },
    search (index) {
      if (index == 1) {
        this.$axios.get('/user/select_goods_bar_code', {
          methods: 'get',
          params: {
            goods_bar_code: this.input
          }
        }).then((res) => {
          if (res.data.code == 200) {
            this.tableData.push(res.data.data);
            this.tableData.length++
          } else {
            this.$alert('商品不存在！请重新输入或添加商品！', '提示', {
              confirmButtonText: '确定',
            });
          }

        })
        this.input = ''
      } else if (index == 2) {
        this.input = this.input1
        this.$axios.get('/user/select_goods_bar_code', {
          methods: 'get',
          params: {
            goods_bar_code: this.input
          }
        }).then((res) => {
          if (res.data.code == 200) {
            this.tableData.push(res.data.data);
            this.tableData.length++
          } else {
            this.$alert('商品不存在！请重新输入或添加商品！', '提示', {
              confirmButtonText: '确定',
            });
          }

        })
        this.input1 = ''

      }
    },
    dialogVisible () {
      for (let i = 0; i < this.tableData.length; i += 2) {
        this.$axios.get('/user/good_add_count', {
          methods: 'get',
          params: {
            good_add_count: this.tableData[i].goods_amount,
            goods_bar_code: this.tableData[i].goods_bar_code
          }

        }).then((res) => {
          this.tableData = []
        })
      }
    }
  },
  mounted () {
    this.dingshiqi();
    this.jujiao()
  },
  created () { },
  beforeDestroy () {
    clearInterval(this.timer);
  },
};
</script>

<style scoped>
#right {
  float: right;
  width: 25%;
}
button.el-button.el-button--primary {
  margin: 0;
}
.top {
  text-align: left;
}
.content_top {
  text-align: left;
}
.el-icon-caret-bottom {
  margin-bottom: 0;
  float: left;
}
.el-icon-caret-top {
  float: right;
  margin-top: 0;
}
.el-table__header-wrapper .el-table__header .has-gutter .el-table th,
.el-table tr {
  background-color: red !important;
}
div /deep/ .el-table__header-wrapper {
  position: fixed;
  z-index: 1000;
  width: 960px;
}
div /deep/ .el-table__body-wrapper {
  margin-top: 50px;
}
.hide {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.top i {
  font-size: 24px;
  margin-right: 10px;
}
.top span {
  font-size: 16px;
}
.ta {
  background-color: lightcoral;
}
.top {
  margin-bottom: 10px;
}
.content {
  margin-top: 10px;
  width: 100%;
  height: 600px;
  border-radius: 3px;
  background-color: #eee;
}
div /deep/ .el-table th,
.el-table tr {
  background-color: rgb(117, 111, 111);
  color: white;
}
.content_top {
  width: 80%;
  height: 80px;
  margin: 0 auto;
  padding: 20px 0;
  box-sizing: border-box;
}
.content_top .el-input,
.content_top .el-button {
  margin-right: 20px;
}
.name {
  float: left;
  margin-left: 10px;
}
.content_bottom {
  width: 80%;
  height: 400px;
  margin: 10px auto;
}
.content_bottom_table {
  width: 75%;
  height: 100%;
  float: left;
}
.content_bottom_table .el-table {
  border-radius: 5px;
}
.content_bottom_button {
  width: 20%;
  float: right;
}
.el-table thead {
  color: white;
}

th.el-table_1_column_1.is-center.is-leaf {
  background-color: rgb(122, 118, 118);
  color: white;
}
th.el-table_1_column_2.is-center.is-leaf {
  background-color: rgb(122, 118, 118);
  color: white;
}
th.el-table_1_column_3.is-center.is-leaf {
  background-color: rgb(122, 118, 118);
  color: white;
}
th.el-table_1_column_4.is-center.is-leaf {
  background-color: rgb(122, 118, 118);
  color: white;
}
th.el-table_1_column_5.is-center.is-leaf {
  background-color: rgb(122, 118, 118);
  color: white;
}
</style>